<script setup>
/**
 * 带返回键和标题的顶部导航栏
 */
const safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets

const props = defineProps({
  title: { type: String, default: '标题为空!' },
  bgcolor: { type: String, default: 'rgb(37, 73, 115)' },
  color: { type: String, default: 'rgb(255,255,255)' },
  hideBack: { type: Boolean, default: false },
  height: { type: Number, default: 70 },
})

// 返回
const back = () => {
  uni.navigateBack()
}
</script>

<template>
  <!--带标题和返回的导航栏-->
  <view
    :style="{ paddingTop: safeAreaInsets?.top + 'rpx', backgroundColor: bgcolor, color: color }"
    class="entire-nav"
  >
    <view class="nav" :style="{ height: height + 'px' }">
      <view v-if="!hideBack" class="left left-click" @click="back">
        <image
          src="@/static/images/icons/icon_return.png"
          style="width: 23rpx; height: 42rpx"
        ></image>
      </view>
      <view v-else class="left"></view>
      <view class="center">
        {{ title }}
      </view>
      <view class="right"></view>
    </view>
  </view>
</template>

<style lang="scss">
//导航栏区域样式
.entire-nav {
  .nav {
    display: flex;
    width: 750rpx;
    align-items: center;
    justify-content: space-between;
    .left {
      padding: 20rpx;
    }
    //图标点击效果
    .back-click {
      opacity: 1;
    }
    .back-click:active {
      opacity: 0.4;
    }
    .center {
      width: 500rpx;
      font-weight: 500;
      font-size: 34rpx;
      margin-top: 10rpx;
      display: flex;
      text-align: center;
      align-items: center;
      justify-content: center;
    }
    .right {
      width: 21rpx;
      margin-right: 42rpx;
    }
  }
}
</style>
